<template>
	<div class="search-item">
		<u-navbar class="navbar" :is-back="false" :is-fixed="index === 1 ? false : true">
		  <search style="width: 100%" :res="res" :style="showStyle"/>
		  <!-- #ifndef H5 -->
		  <!-- 扫码功能 不兼容h5 详情文档: https://uniapp.dcloud.io/api/system/barcode?id=scancode -->
		  <div slot="right" class="navbar-right">
			<u-icon name="scan" @click="scan()" color="#666" size="50"></u-icon>
		  </div>
		  <!-- #endif -->
		</u-navbar>
	</div>
</template>

<script>
	import tpl_search from "@/pages/tabbar/home/template/tpl_search"; //搜索栏

export default {
  props: {
	  res: {
		  default: ()=>{
			  return {}
		  }
	  },
	  index: {
		  
	  }
  },
  components: {
	search: tpl_search
  },
  computed: {
    showStyle() {
      let style = {
		  height: '100%',
		  width: '100%'
	  }
      if (Array.isArray(this.res.list) && this.res.list.length > 0) {
        let curItem = this.res?.list[0]
        if (curItem && curItem.backgroundImage) {
          // style['border'] = '1px solid red'
          style['background-image'] = `url(${curItem.backgroundImage})`
          style['padding'] = '0 3vw'
          style['background-size'] = 'cover'
          style['background-repeat'] = 'no-repeat'
        }
      }
      return style
    }
  },
   data () {
    return {
      isIos: "",
    }
  },
	  
  methods: {
    /**
     * TODO 扫码功能后续还会后续增加
     * 应该实现的功能目前计划有：
     * 扫描商品跳转商品页面
     * 扫描活动跳转活动页面
     * 扫描二维码登录
     * 扫描其他站信息 弹出提示，返回首页。
     */
    scanCode () {
      uni.scanCode({
        success: function (res) {
          let path = encodeURIComponent(res.result);



          if (path != undefined && path.indexOf("QR_CODE_LOGIN_SESSION") == 0) {
            console.log(path)
            //app扫码登录
            uni.navigateTo({
              url: "/pages/passport/scannerCodeLoginConfirm?token=" + path
            });
            return;
          }


          // WX_CODE 为小程序码
          if (res.scanType == "WX_CODE") {
            console.log(res);
            uni.navigateTo({
              url: `/${res.path}`,
            });
          } else {
            config.scanAuthNavigation.forEach((src) => {
              if (res.result.indexOf(src) != -1) {
                uni.navigateTo({
                  url: `/${res.result.substring(src.length)}`,
                });
              } else {
                setTimeout(() => {
                  uni.navigateTo({
                    url: "/pages/tabbar/home/web-view?src=" + path,
                  });
                }, 100);
              }
            });
          }
        },
      });
    },
    /**
     * 提示获取权限
     */
    tipsGetSettings () {
      uni.showModal({
        title: "提示",
        content: "您已经关闭相机权限,去设置",
        success: function (res) {
          if (res.confirm) {
            if (this.isIos) {
              plus.runtime.openURL("app-settings:");
            } else {
              permission.gotoAppPermissionSetting();
            }
          }
        },
      });
    },
	
	/**
	 * 唤醒客户端扫码
	 * 没权限去申请权限，有权限获取扫码功能
	 */
	async scan () {
	  // #ifdef APP-PLUS
	  this.isIos = plus.os.name == "iOS";
	  // 判断是否是Ios
	  if (this.isIos) {
	    const iosFirstCamera = uni.getStorageSync("iosFirstCamera"); //是不是第一次开启相机
	    if (iosFirstCamera !== "false") {
	      uni.setStorageSync("iosFirstCamera", "false"); //设为false就代表不是第一次开启相机
	      this.scanCode();
	    } else {
	      if (permission.judgeIosPermission("camera")) {
	        this.scanCode();
	      } else {
	        // 没有权限提醒是否去申请权限
	        this.tipsGetSettings();
	      }
	    }
	  } else {
	    /**
	     * TODO 安卓 权限已经授权了，调用api总是显示用户已永久拒绝申请。人傻了
	     * TODO 如果xdm有更好的办法请在 https://gitee.com/beijing_hongye_huicheng/lilishop/issues 提下谢谢
	     */
	    this.scanCode();
	  }
	
	  // #endif
	
	  // #ifdef MP-WEIXIN
	  this.scanCode();
	  // #endif
	},  
  },
  mounted() {
 
  },
};
</script>
<style lang="scss" scoped>
@import "./tpl.scss";
.search-item{
	/deep/ .navbar{
		.u-navbar{
			background: rgba(0,0,0,0)!important;
		}
		.u-slot-content{
			height: 100%;
		}
		.layout{
			background: rgba(0,0,0,0)!important;
			display: flex;
			align-items: center;
			justify-content: space-evenly;
			background-image: url("/static/img/logotext.png") !important;
			background-repeat: no-repeat !important;
			background-size: 13% 43% !important;
			background-position-y: center !important;
			background-position-x: 0rpx!important;
			width: 100%;
			height: 100%;
			margin: 0;
			.search{
				background: #ffffff;
				border-radius: 100rpx;
				height: 48rpx;
				color: $main-color;
				width: 70vw;
			}
			.navbar-right{
				background: rgba(0,0,0,0)!important;
				color: #ffffff;
				top: 10rpx;
			}
		}
	}
}
</style>
